<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="logo flex j-center a-center">
					<view>附近任务</view>
				</view>
				<view class="flex a-center place">
					<view class="msg">
						<image class="image" src="../static/icon/idx/map.png"></image>
					</view>
					<view>金源时代广场</view>
				</view>
			</view>
		</view>
		<view class="flex a-center search">
			<view class="s-icon">
				<image class="image" src="../static/icon/idx/idx(5).png"></image>
			</view>
			<view>搜索任务</view>
		</view>
		<view class="notice">
			<view class="flex a-center near">
				<view>附近可赚</view>
				<view class="coin-pic">
					<image class="image" src="../static/icon/idx/idx(7).png"></image>
				</view>
				<view class="coin">1000</view>
			</view>
			<view class=" flex j-between a-center">
				<view class="n-icon">
					<image class="image" src="../static/icon/idx/idx(1).png"></image>
				</view>
				<view class="n-list">
					<u-notice-bar color="#999" type="none" mode="vertical" :volume-icon="false" :list="notice"></u-notice-bar>
				</view>
			</view>
		</view>
		<view class="menus">
			<u-tabs :font-size="32" :list="menus" bg-color="transparent" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="sort flex j-between a-center">
			<view class="flex a-center" v-for="(item,i) in sort" :key="i" :class="{'crt-sort':i == sort_crt}" @tap="sorts(i)">
				<view class="s-name">{{item.name}}</view>
				<u-icon name="arrow-down" size="10"></u-icon>
			</view>
		</view>
		<view>
			<task-item v-for="(item,i) in jx_task" :key="i" :item="item"></task-item>
		</view>
	</view>
</template>

<script>
	import taskItem from './components/task-item.vue'
	export default {
		components:{taskItem},
		data() {
			return {
				keyword:'',
				notice:[
					'用户188****8888 刚刚赚到了500金币',
					'用户188****8888 刚刚赚到了500金币',
					'用户188****8888 刚刚赚到了500金币'
				],
				menus:[{name:'推荐'},{name:'日常任务'},{name:'自由任务'},{name:'商家任务'}],
				current:0,
				sort:[{name:'默认排序'},{name:'最新发布'},{name:'奖励最高'}],
				sort_crt:0,
				jx_task:[
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:0,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:1,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'},
					{name:'商家拉新',coin:1000,top:true,t_name:'互砍任务',jd:52,wc:10,sy:20,src:'https://cdn.uviewui.com/uview/common/logo.png'}
				]
			}
		},
		methods: {
			top(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:pdt+'px'}
			},
			ctop(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+44)+'px'}
			},
			change(i){
				this.current = i
			},
			taskStyle(count){
				return {width:count*165+'rpx'}
			},
			sorts(i){
				this.sort_crt = i
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx;width: 100%;background-color: #F9F9F9;left:0;top:0;z-index: 10;
	.logo{height: 52rpx;font-size: 36rpx;font-weight: bold;color:#333;}
	.place{font-size: 32rpx;color:#333;
		.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
	}
}	
.search{color: #999;font-size: 28rpx;background-color: #F2F2F2;border-radius: 200rpx;
	padding: 0 24rpx;height: 72rpx;
	.s-icon{width: 34.12rpx;height: 34.12rpx;margin-right: 22rpx;}
}
.my-swiper{width: 702rpx;height: 320rpx;margin: 24rpx auto 0;}
.notice{background-color: #FFF;border-radius: 16rpx;padding:24rpx 24rpx 0;margin-top: 24rpx;
	.near{font-size: 28rpx;color: #033333;
		.coin-pic{width: 36rpx;height: 36rpx;margin: 0 8rpx 0 24rpx;}
		.coin{font-size: 32rpx;font-weight: bold;}
	}
	.n-icon{width: 118rpx;height: 42rpx;}
	.n-list{width: 600rpx;}
}
.menus{margin-top: 20rpx;}
.sort{padding: 20rpx 58rpx 32rpx;color: #333;font-size: 28rpx;
	.s-name{margin-right: 10rpx;}
}
.crt-sort{color: #246FDD;}
</style>
